<template>
    <div class="app-container">
        <Levelbar></Levelbar>
        <TableLayout form-title="">

            <el-form :model="search" ref="search" :rules="rules" slot="form" label-width="100px">
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="激活码状态">
                            <el-select v-model="search.stateName" placeholder="请选择" style="width:100%" >
                                <el-option v-for="item in stateList" :key="item.pId" :label="item.stateName" :value="item.stateKey"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="激活码" prop="stateCode">
                            <el-input v-model="search.stateCode" :maxlength="12" placeholder="请输入激活码" style="width:100%"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="发放手机号" prop="sendphone">
                            <el-input v-model="search.sendphone" :maxlength="11" placeholder="请输入手机号" style="width:100%"></el-input>
                        </el-form-item>
                    </el-col>  
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="激活手机号" prop="activatephone">
                            <el-input v-model="search.activatephone" :maxlength="11" placeholder="请输入手机号" style="width:100%"></el-input>
                        </el-form-item>
                    </el-col> 
                </el-row>
                <div class="top-line">
                    <el-button type="primary" class="top-btn" @click="onSubmit('search')">查询</el-button>
                    <!-- <el-button class="top-btn" @click="reset('query')">清空</el-button> -->
                </div>
            </el-form>

            <div class="table-title" slot="table-title">
                <span class="table-title-span"><el-button @click="goToAddRole()">批量发放</el-button></span>
            </div>
            
            <el-table :data="tableData" v-loading="loading" style="width: 100%" border>
                <el-table-column label="激活码" prop="sActivationCode"  width="170" align="center"></el-table-column>
                <el-table-column label="发放手机号" prop="sGrantPhone" align="center">
                    <template scope="scope">
                        {{!scope.row.sGrantPhone ? '--' : scope.row.sGrantPhone}}
                    </template>
                </el-table-column>
                <el-table-column label="发放时间" prop="sGrantTime" align="center">
                    <template scope="scope">
                        {{!scope.row.sGrantTime ? '--' : scope.row.sGrantTime}}
                    </template>
                </el-table-column>
                <el-table-column label="激活状态" prop="sActivationStatus" align="center">
                    <template scope="scope">
                        <!-- 状态 0未激活 1已激活 -->
                        {{scope.row.sActivationStatus == '0' ? '待激活' : scope.row.sActivationStatus == '1' ? '已激活' : '--'}}
                    </template>
                </el-table-column>

                <el-table-column label="激活手机号" prop="sActivationPhone" align="center">
                    <template scope="scope">
                        {{!scope.row.sActivationPhone ? '--' : scope.row.sActivationPhone}}
                    </template>
                </el-table-column>
                <el-table-column label="激活时间" prop="sActivationTime" align="center">
                    <template scope="scope">
                        {{!scope.row.sActivationTime ? '--' : scope.row.sActivationTime}}
                    </template>
                </el-table-column>
                
                <el-table-column label="操作" align="center">
                    <template scope="scope">
                        <el-button v-if="scope.row.sStatus === '0'" type="text" class="btn-success" @click="openService(scope.row)" >发放</el-button>
                        <el-button v-else type="text" class="btn-success" @click="afreshService(scope.row)" :disabled="true">已发放</el-button>
                    </template>  
                </el-table-column>

            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>

        <el-dialog title="发放激活码" :visible.sync="dialogFormVisible" size="tiny">
            <div class='checkReson'>
                <el-form ref="ruleForm" :model="ruleForm" label-width="100px" :rules="rules">

                    <el-row :gutter="41">
                        <el-col :span="22">
                            <el-form-item label="手机号：" prop="phone">
                                <el-popover placement="top-start" trigger="focus" content="请输入手机号">
                                    <el-input slot="reference" :maxlength="11" v-model="ruleForm.phone" placeholder="请输入手机号"></el-input>
                                </el-popover>
                            </el-form-item>
                        </el-col>
                    </el-row> 
                    
                </el-form>
                <footer>
                    <el-button @click="cancel">取消</el-button>
                    <el-button @click="add('ruleForm')" type="primary">确认</el-button>
                </footer>
            </div>
        </el-dialog>

        <!--批量绑卡-->
        <batchBind v-if="batchBind.dialogFormVisible" :batchBind="batchBind" @bindState="bindState"></batchBind>

    </div>
</template>

<script>
import Levelbar from '../layout/Levelbar';
import TableLayout from 'components/TableLayouts';
import { mapState, mapActions } from 'vuex';
import validate from '@/utils/validate';
import school from 'components/SchoolClasss/school';
import batchBind from './comps/batchBind';
import {
  listActivationCodeDetailByActivationCodeId,
  updateActivationCodeDetail
} from 'api/numberManagement';

export default {
    name: 'orderDetails',
    components: { Levelbar, TableLayout, school, batchBind },
    data() {
        return {
            loading: false,
            schoolList: [], 
            // 学校名称集合
            tableData: [], 
            // 外table集合
            listQuery: {
                page: 1,
                total: 1
            },
            // 查询条件集合
            search: {
                stateName: '',
                stateCode: '',
                sendphone: '',
                activatephone: ''
            },
            ruleForm: {
                phone: ''
            },
            stateList: [
                {
                    stateKey: '',
                    stateName: '请选择'
                },
                {
                    stateKey: '0',
                    stateName: '待发放'
                },
                {
                    stateKey: '1',
                    stateName: '已发放'
                },
                {
                    stateKey: '2',
                    stateName: '待激活'
                },
                {
                    stateKey: '3',
                    stateName: '已激活'
                }
            ],
            sStatus: '',
            sActivationStatus: '',

            fActivationCodeId: '',
            pId: '',

            dialogFormVisible: false,

            dialog: {
                dialogFormVisible: false
            },
            batchBind: {
                dialogFormVisible: false
            },
            
            rules: {
                sendphone: [...validate.phone()],
                activatephone: [...validate.phone()],
                phone: [...validate.phone()],
                stateCode: [
                    { max: 12, min: 12, message: '激活码不足12位', trigger: 'blur' }
                ]
            }
        };
    },
    created() {
        this.queryData();
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        })
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.queryData();
        },
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.queryData();
        },
        schoolChange(val) {
            if (!val) {
// 
            } else {
                this.search.schoolId = val;
                listClassInfoBySchoolId(val).then(data => {
                    if (data.data.content) {
                        this.classList = data.data.content;
                        this.classList.unshift({sNickName: '请选择'})
                    }
                }).catch(Error => {
                    this.$message.error(Error)
                })
            }
        },
        onSubmit(ruleForm) {
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                    this.queryData();
                    this.listQuery.page = 1;
                } else {
                    return false;
                }
            });
        },

        queryData() {
            this.loading = true;
            if (this.search.stateName === '0' || this.search.stateName === '1') {
                this.sStatus = this.search.stateName;
                this.sActivationStatus = '';
            } else if (this.search.stateName === '2') {
                this.sActivationStatus = '0';
                this.sStatus = '';
            } else if (this.search.stateName === '3') {
                this.sActivationStatus = '1';
                this.sStatus = '';
            } else {
                this.sActivationStatus = '';
                this.sStatus = '';
            }

            listActivationCodeDetailByActivationCodeId(
                this.$route.params.id,
                this.search.stateCode,
                this.sStatus,
                this.sActivationStatus,
                // this.search.stateName,
                this.search.sendphone,
                this.search.activatephone,
                this.listQuery.page,
                this.config.pageSize
            ).then(data => {
                this.loading = false;
                this.tableData = [];
                if (data.data.content) {
                    this.tableData = data.data.content.list;
                    this.listQuery.total = data.data.content.pagination.total;
                }
            }).catch(Error => {
                this.tableData = [];
                this.loading = false;
            })
        },
        // 返回年月  yyyy - mm
        filterDate(val) {
            if (val) {
                let month = val.getMonth() + 1 + '';
                return `${val.getFullYear()}-${month.length > 1 ? month : '0' + month}`;
            } else {
                return ''
            }
        },

        // 通过id查找对应的数组里面的值
        fiflterArray(id) {
            if (id) {
                let num = null;
                this.schoolList.forEach(item => {
                    if (item.pId == id) {
                        num = item.sName;
                    }
                });
                return num;
            }
        },
        // 批量绑定
        goToAddRole() {
            // this.dialog.dialogFormVisible = true;
            this.batchBind.dialogFormVisible = true;
        },
        add(ruleForm) {
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                    updateActivationCodeDetail(
                        this.fActivationCodeId,
                        this.pId,
                        this.ruleForm.phone
                    ).then(data => {
                        this.loading = false;
                        this.dialogFormVisible = false;
                        this.ruleForm.phone = '';
                        this.$message({
                            message: '发放成功！',
                            type: 'success'
                        });
                        this.queryData();
                    }).catch(Error => {
                        this.$message.error(Error);
                        this.loading = false;
                    });
                } else {
                    return false;
                }
            });
            
        },
        openService(row) {
            this.dialogFormVisible = true;
            this.fActivationCodeId = row.fActivationCodeId;
            this.pId = row.pId;
        },
        bindState() {
            this.dialog.dialogFormVisible = false;
            this.queryData();
        },
        cancel() {
            this.$refs.ruleForm.resetFields();
            this.dialogFormVisible = false;
            this.ruleForm.phone = '';
        }
    },
    watch: {
        dialogFormVisible(val) {
            if (val) {
                // console.log('val', val);
            } else {
                this.cancel();
            }
        } 
    }
};
</script>

<style lang="scss" scoped>
.app-container {
  position: relative;
  padding: 20px 20px 10px;
  $bgcolor: #fff;
  @mixin box-item() {
    overflow: hidden;
    background: $bgcolor;
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
    color: #333;
    font-size: 14px;
    padding: 20px 20px;
  }
  @mixin tip-css {
    display: inline-block;
    height: 12px;
    width: 6px;
    border-left: 3px solid #ff5e2c;
    padding-left: 15px;
  }
  .app-levelbar {
    height: 35px;
  }
  .total-sales {
    @include box-item();
    
    margin-top: 15px;
    .sales-title {
      .tip {
        @include tip-css();
      }
      .current-time {
        padding-right: 8px;
      }
    }
    .current-month {
      display: flex;
      justify-content: space-between;
      padding: 20px;
      padding-top: 40px;
      .current-item {
        .title {
          font-size: 16px;
          color: #aaa;
          width: 50px;
          padding-bottom: 30px;
          width: 160px;
          text-align: center;
        }
        .data {
          font-size: 26px;
          color: #333;
          text-align: center;
          width: 160px;
        }
      }
    }
  }
  footer {
    text-align: center;
  }
}
</style>